<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="../css/login.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <script src="../script/login_module.js" type="module"></script>
</head>

<body>
    <!-- 版心 -->
    <div class="wrapper clear">
        <!-- 顶部 -->
        <div>
            <img src="../img/phone.png" alt="">
            <span><a href="javascript:;">手机惠买</a></span>
        </div>
        <!-- 左边二维码图 -->
        <div>
            <img src="../img/logEWM.gif" alt="" class="EWM">
        </div>
        <!-- 表单右上角的提示 -->
        <div class="regnav">
            <ul>
                <li class="regnav_tips">如有疑问请点击<a class="cg" href="/help.html" target="_blank">帮助中心</a>，或拨打客服热线：<em>400-707-0707</em></li>
            </ul>
        </div>
        <!-- 整个登录区域 -->
        <div style="width: 968px;height: 440px;border:2px solid #ff8400;margin:0 auto;">
            <!-- 左边盒子(包裹登录表单) -->
            <div class="leftbox">
                <!-- 登录表单 -->
                <!-- <fieldset> -->
                <form action="" class="login">
                    <!-- 准备接收信息的后端页面 -->
                    <p>
                        <label for="">手机号/邮箱/昵称</label><br>
                        <input type="text" class="phone"><span class="iconfont">&#xe63d;</span><em style="margin-left: 5px;"></em>
                    </p>
                    <p>
                        <label for="">密码</label><br>
                        <input type="password" class="password"><span class="iconfont">&#xe645;</span><em style="margin-left: 5px;"></em>
                    </p>
                    <p style="margin:5px 0 28px 0;">
                        <input type="checkbox" style="vertical-align: text-bottom;margin-right: 3px;">记住用户名
                        <a href="/article-48.html" target="_blank" style=" color: #0089CF;margin-left: 215px;">忘记密码？</a>
                    </p>
                    <p>
                        <input type="button" value="登&nbsp;&nbsp;录" class="loginBtn">
                    </p>
                </form>
                <div class="warmtips">
                    <i style="font-weight: bolder;color:#666;">温馨提示：</i>
                    <em>惠买升级为电视购物大全，其中融合了优购物、时尚购等多家优质购物频道。时尚购APP用户已合并至惠买，可以通过时尚购APP账户和密码登录惠买。</em>
                </div>
                <!-- </fieldset> -->
            </div>
            <!-- 右边盒子 -->
            <div class="rightbox">
                <span>您还不是惠买的会员？</span>
                <a href="http://10.31.165.37/ugoshop%20project/src/html/registry.html">免费注册&nbsp;></a>
                <span>电话购买过惠买的产品？</span>
                <a href="javascript:;">快速激活&nbsp;></a>
            </div>
        </div>
    </div>
    <!-- 半透明遮罩层 -->
    <!-- 用户名或密码不正确时弹出 -->
    <div class="mask"></div>
</body>

</html>
<!-- 
    登录的思路：
        - 点击登录按钮，将用户名和密码传输给后端 - ajax
        - 后端获取用户名和密码去和数据库里面的数据进行匹配
        - 后端将匹配的结果返回给前端
        - 前端显示是否成功的结果
 -->